<template>
	<mescroll-uni :fixed="false" :down="downOption" :up="upOption" @up="upCallback" @init="mescrollInit">
		<view class="container">
			<view v-for="(item,index) in list" :key="item.id" class="destination-item" @click="previewDetail(item)">
				<image v-if="item.tps.length" :src="item.tps[0].url" class="logo" />
				<view v-else class="logo">暂无图片</view>
				<view class="content">
					<view class="tit">{{ item.title }}</view>
					<view class="tag-box">
						<view v-for="tag in tagList(item)" :key="tag" class="tag-item">
							{{ tag }}
						</view>
					</view>
					<view class="bottom-box">
						<view class="price">
							{{ '¥' + (item.prices || item.provisionaPrice) }}
						</view>
						<!-- <view>{{ item.distanceInKm + 'km' }}</view> -->
					</view>
				</view>
			</view>
		</view>

	</mescroll-uni>
</template>

<script>
	import Mescroll from './mescroll-uni/mescroll-uni.vue'
	import {
		parkInfoMyList
	} from '@/api/parkInfo';
	export default {
		props: {
			// 当前tab的下标
			curIndex: {
				type: Number,
				default: 0
			},
			// 每个tab页的专属下标
			currentIndex: { // 当前tab的下标
				type: Number,
				default () {
					return 0
				}
			}
		},
		components: {
			'mescroll-uni': Mescroll
		},
		data() {
			return {
				hasLocation: false,
				location: {
					longitude: 0,
					latitude: 0,
				},
				list: [],
				mescroll: null, //mescroll实例对象
				downOption: {
					use: false, // 是否启用下拉刷新; 默认true
				},
				upOption: {
					use: true, // 是否启用上拉加载; 默认true
					auto: true, // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true
					page: {
						num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 10 // 每页数据的数量
					},
					noMoreSize: 1, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					empty: {
						tip: '暂无数据', // 提示
						icon: ''
					}
				},
			}
		},

		created() {
			if (this.mescroll) {
				this.list = []; //清空
				this.mescroll.resetUpScroll();
			}
		},

		watch: {
			// 监听下标的变化
			currentIndex(val) {
				if (this.mescroll) {
					this.list = []; //清空
					this.mescroll.resetUpScroll();
				}
			}
		},

		methods: {
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},

			previewDetail(data) {
				if (data.status == '审核中') {
					uni.showToast({
						title: '还在审核中呢',
						icon: 'none'
					})
					return
				}else{
					wx.navigateTo({
						url: `/pages/subPack/info-share/info-detail?data=${encodeURIComponent(JSON.stringify(data))}`
					});
				}
			},
			tagList(item) {
				const list = item.sfmsText.split(',').concat(item.tclxText.split(','));
				return list;
			},

			async upCallback(page) {
				console.log("this.currentIndex: ", this.currentIndex);
				// setTimeout(() => {
				// 	this.$nextTick(() => {
				// 		this.mescroll.endSuccess(1)
				// 	})
				// }, 500)
				const location = wx.getStorageSync('location')
				console.log("location: ", location);
				const params = {
					page: page.num,
					currentZb: `${location.longitude},${location.latitude}`,
					limit: page.size,
					status: this.currentIndex == 0 ? '审核成功' : this.currentIndex == 1 ? '审核中' : '审核失败',
				};

				const response = await parkInfoMyList(params)
				console.log("response: ", response);

				if (response) {
					this.list = response.data.list
					setTimeout(() => {
						this.$nextTick(() => {
							this.mescroll.endSuccess(response.data.list.length)
						})
					}, 500)
				}
			},
			Rad(d) {
				return (d * Math.PI) / 180.0; //经纬度转换成三角函数中度分表形式。
			},
			getMapDistance(lat1, lng1) {
				const radLat1 = this.Rad(lat1);
				const radLat2 = this.Rad(this.location.latitude);
				const a = radLat1 - radLat2;
				const b = this.Rad(lng1) - this.Rad(this.location.longitude);
				let s =
					2 *
					Math.asin(
						Math.sqrt(
							Math.pow(Math.sin(a / 2), 2) +
							Math.cos(radLat1) *
							Math.cos(radLat2) *
							Math.pow(Math.sin(b / 2), 2),
						),
					);
				s = s * 6378.137; // EARTH_RADIUS;
				s = Math.round(s * 10000) / 10000; //输出为公里
				s = s.toFixed(1);
				return s + 'km';
			},
		}
	}
</script>

<style lang="scss" scoped>
	.destination-item {
		width: 100%;
		padding: 16rpx;
		background: white;
		border-radius: 10rpx;
		display: flex;
		flex-direction: row;
		margin-bottom: 10rpx;

		.logo {
			width: 120rpx;
			height: 120rpx;
			border-radius: 10rpx;
			margin-right: 20rpx;
		}

		.content {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			flex: 1;

			.tit {
				font-weight: 700;
			}

			.tag-box {
				display: flex;
				margin: 10rpx 0;

				.tag-item {
					padding: 4rpx 16rpx;
					border-radius: 8rpx;
					color: white;
					font-size: 12px;
					background: #18bc37;
					margin-right: 8rpx;
				}
			}

			.bottom-box {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
			}
		}
	}
</style>
